<template>
  <div class="upload">
    <div class="contan">
      <form enctype="multipart/form-data">
        <el-button @click="dialogVisible = true" type="success" size="small"
          >添加图片</el-button
        >
      </form>

      <el-table
        :data="
          bannerlist.slice((currentPage - 1) * PageSize, currentPage * PageSize)
        "
        style="width: 80%"
      >
        <el-table-column
          prop="title"
          label="title"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="pic"
          label="图片地址"
          width="200"
        ></el-table-column>
        <el-table-column label="图片展示">
          <template slot-scope="scope">
            <img :src="scope.row.pic" style="height: 50px"/></template
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(bannerlist, scope.$index)"
            >
            </el-button>
            <el-button
              v-show="
                bannerlist[currentPage * PageSize - (PageSize - scope.$index)]
                  .status == 1
              "
              type="primary"
              @click="forbid(bannerlist, scope.$index)"
              ><a style="color:white">禁用</a></el-button
            >
            <el-button
              v-show="
                bannerlist[currentPage * PageSize - (PageSize - scope.$index)]
                  .status == 3
              "
              type="primary"
              @click="forbid(bannerlist, scope.$index)"
              ><a style="color:white">已禁用</a></el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="tabListPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-input v-model="title" placeholder="请输入title" style="margin-bottom:15px"></el-input>
        <input
          type="file"
          accept="image/*"
          @change="handleFile"
          class="hiddenInput"
          style="display: block"
          placeholder="添加banner"
        />
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: null,
      host_img: JSON.parse(localStorage.getItem("headimg")),
      userInfo: {
        avatar: require("../assets/img/my.png"),
      },
      headimg: "",
      bannerlist: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 14,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4],
      // 默认每页显示的条数（可修改）
      PageSize: 4,
      title: "",
      tableDataFilter: [], //筛选后的数据
      banner_id: null,
      statusbox: [], //禁用状态数组
      dialogVisible: false,
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getbannerList();
  },
  methods: {
    dialogVisible1(){
      this.dialogVisible=false

    },
    uploadHeadImg() {
      this.$el.querySelector(".hiddenInput").click();
    },
    handleFile(e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
      let param = new FormData();
      param.append("img", file);
      console.log(typeof param, 111111);
      this.userInfo.avatar = file;
      this.axios
        .post("http://api_devs.wanxikeji.cn/api/savePic", param)
        .then((response) => {
          this.userInfo.avatar = response.data.data;
          console.log(response.data);
          this.host_img = "http://api_devs.wanxikeji.cn/" + response.data.data;
          localStorage.setItem("headimg", JSON.stringify(this.host_img));
          this.axios
            .post("http://api_devs.wanxikeji.cn/api/admin/bannerAddModify", {
              token: this.token,
              title: this.title,
              pic: this.host_img,
              url: "index",
            })
            .then((res) => {
              console.log(res.data);
              this.getbannerList();
              this.title= "";
              this.dialogVisible=false
            });
        });
    },
    getbannerList() {
      this.statusbox = [];
      this.axios
        .post("http://api_devs.wanxikeji.cn/api/admin/bannerList", {
          token: this.token,
          size: 100,
        })
        .then((res) => {
          this.bannerlist = res.data.data.data;
          this.totalCount = this.bannerlist.length;
        });
    },
    //删除行
    handleDelete(lines, val) {
      console.log(val);
      console.log(lines);

      this.axios
        .post("http://api_devs.wanxikeji.cn/api/admin/bannerDelete", {
          token: this.token,
          id: this.bannerlist[
            this.currentPage * this.PageSize - (this.PageSize - val)
          ].banner_id,
        })
        .then((res) => {
          console.log(res.data);
          this.getbannerList();
        });
    },
    //禁用
    forbid(lines, val) {
      console.log(lines, val);
      this.axios
        .post("http://api_devs.wanxikeji.cn/api/admin/bannerBan", {
          token: this.token,
          id: this.bannerlist[
            this.currentPage * this.PageSize - (this.PageSize - val)
          ].banner_id,
        })
        .then((res) => {
          console.log(res.data);
          this.getbannerList();
        });
    },

    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
.itemimg {
  width: 200px;
  height: 100px;
}

.avatar_img {
  width: 100%;
  height: 100%;
}

.avatar_e {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  overflow: hidden;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader {
  display: flex;
}
.contan {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  padding: 15px;
}
.upload {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background-color: #f1f3f2;
}
</style>
